<template>
  <div class="paiming-container bordered">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="paiming">
      <div class="paiming-header">
        <h1>今日电量排名</h1>
      </div>
      <div class="paiming-body">
        <div class="w1 h1" ref="paiming-ref"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex"
const labelOption = {
  normal: {
    show: true,
    position: "insideBottom",
    distance: 15,
    align: "left",
    verticalAlign: "middle",
    rotate: 90,
    formatter: params => `${params.value} KW.h`,
    fontSize: 12
  }
}
export default {
  mounted() {
    this.initState()
  },
  beforeDestroy() {
    if (this.mapBottle) {
      window.addEventListener("resize", () => false)
    }
  },
  computed: {
    ...mapState({
      todayUsePowerList: state => state.cityInfo.todayUsePowerList
    })
  },
  watch: {
    todayUsePowerList: {
      deep: true,
      handler() {
        this.initState()
      }
    }
  },
  data() {
    return {
      mapBottle: null
    }
  },
  methods: {
    initState() {
      this.$nextTick(() => {
        const vm = this
        const dom = vm.$refs["paiming-ref"]
        const todayUsePowerList = vm.todayUsePowerList || []
        // .filter(t => t.value !== 0)
        vm.mapBottle = vm.echarts.init(dom)
        const series = todayUsePowerList.map((t, i) => {
          return {
            name: t.companyName,
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: [t.value],
            tooltip: {
              formatter: params =>
                `今日 ${params.name} 用电量： <br/> ${params.marker} ${
                  params.seriesName
                } ${params.value} KW.h`
            }
          }
        })
        let option = {
          color: [
            "#1890FF",
            "#2FC25B",
            "#FACC14",
            "#223273",
            "#8543E0",
            "#13C2C2",
            "#3436C7",
            "#F04864"
          ],
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            confine: true
          },
          grid: {
            left: 5,
            top: 0,
            right: 5,
            bottom: 5
          },
          legend: {
            show: false
          },
          xAxis: {
            boundaryGap: true,
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#0BFFE9"
              }
            },
            axisTick: { show: false },
            data: [this.moment().format("YYYY-MM-DD")]
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          series
        }
        vm.mapBottle.setOption(option)
        window.addEventListener("resize", () => {
          vm.mapBottle.resize()
        })
      })
    }
  }
}
</script>
